<template>
    <div class="container">
        <div class="ppt">
            <div class="left">
                <div class="main">
                    <div class="tabs">
                        <div @click="itemClick(item, index)" class="tab" :class="{ 'active': currentIndex === index }"
                            v-for="(item, index) in tabs" :key="index">{{ item }}</div>
                    </div>
                    <div class="logo">
                        <el-upload v-loading="img_loading" :http-request="uploadRequest" class="avatar-uploader el-upload"
                            :show-file-list="false" action="https://jsonplaceholder.typicode.com/posts/">
                            <!-- <img v-if="imgData.bannerImg" :src="imgData.bannerImg" class="avatar"> -->
                            <div class="upload-text">选择图片/视频</div>
                        </el-upload>
                        <div class="logo_right">
                            <div class="logo_set">LOGO设置</div>
                            <div class="logo_des">建议尺寸100*100</div>
                            <div class="child_tabs">
                                <div @click="childClick(item, index)" v-for="(item, index) in childTabs" :key="index"
                                    class="tab" :class="{ 'active': currentChildIndex === index }">{{ item.label }}</div>
                            </div>
                        </div>
                    </div>
                    <!-- model -->
                    <div class="model" v-if="currentIndex == 0">
                        <div class="model_title">PPT模板主题</div>
                        <div class="model_content">
                            <div class="model_item" v-for="(item, index) in models" :key="index">
                                <img src="https://copyright.bdstatic.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpg@h_1280"
                                    alt="">
                                <div class="item_title">主题{{ index + 1 }}</div>
                            </div>
                        </div>
                    </div>
                    <!-- model -->
                    <div class="model" v-else>
                        <div class="model_title">PPT模板主题</div>

                        <div class="logo">
                            <el-upload v-loading="img_loading" :http-request="uploadRequest"
                                class="avatar-uploader el-upload" :show-file-list="false"
                                action="https://jsonplaceholder.typicode.com/posts/">
                                <!-- <img v-if="imgData.bannerImg" :src="imgData.bannerImg" class="avatar"> -->
                                <div class="upload-text">选择图片/视频</div>
                            </el-upload>
                            <div class="logo_right">
                                <div class="logo_set">首页设置</div>
                                <div class="logo_des">建议尺寸100*100</div>
                            </div>
                        </div>
                        <div class="logo">
                            <el-upload v-loading="img_loading" :http-request="uploadRequest"
                                class="avatar-uploader el-upload" :show-file-list="false"
                                action="https://jsonplaceholder.typicode.com/posts/">
                                <!-- <img v-if="imgData.bannerImg" :src="imgData.bannerImg" class="avatar"> -->
                                <div class="upload-text">选择图片/视频</div>
                            </el-upload>
                            <div class="logo_right">
                                <div class="logo_set">尾页设置</div>
                                <div class="logo_des">建议尺寸100*100</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="ppt" ref="canvasDom" class="right" :style="'width:800px'" v-if="currentIndex == 0">
                <!-- <img v-for="(img,index) in imgs" :key="index" :src="img" alt=""> -->
                <img src="@/assets/images/code.png" class="logo_img" :style="'left:' + childTabs[currentChildIndex].left">
                <img :src="imgs[0]">
                <div class="info">
                    <div class="info_left">
                        <img class="img_big" src="@/assets/images/mm.png" alt="">
                        <div class="imgs">
                            <img v-for="index of 3" :key="index" src="@/assets/images/m1.png" alt="">
                        </div>
                    </div>
                    <div class="info_right">
                        <div class="info_item" style="margin: 0;">
                            <div class="info_item" style="margin: 0;">商品ID：{{ materialInfo.id }}</div>
                            <div class="info_item address">国潮城市系列商务笔记本签字笔保温杯国潮城市系列</div>
                        </div>
                        <div>
                            <div class="info_item"><label class="line">发货地：</label>{{ materialInfo.sendAddress }}</div>
                            <div class="info_item"><label class="line">起订量：</label>{{ materialInfo.orderNum }}</div>
                            <div class="info_item"><label class="line">规格参数</label></div>
                            <div class="info_item">
                                <div class="info_item" v-for="(item, index) in materialInfo.spec" :key="index">
                                    <label class="child">{{ item.label }}:</label>
                                    <span>{{ item.value }}</span>
                                </div>
                            </div>
                            <div class="info_item"><label class="line">价格</label></div>
                            <div class="info_item">

                                <div class="info_item">
                                    <label class="child">【{{ materialInfo.spec[0].value }}】</label>
                                    <label class="child">装箱：{{ materialInfo.box }}</label>
                                    <label class="child">起订：{{ materialInfo.orderNum }}</label>
                                </div>
                                <div class="info_item">
                                    <label class="child">【采集】</label>
                                    <label class="child" v-for="(item, index) in materialInfo.price"
                                        :key="index">{{ item.label }} : {{ item.value }} {{ item.des ? `(${item.des})` : ''
                                        }}</label>
                                </div>
                                <div class="info_item">
                                    <label class="child">【代发】</label>
                                    <label class="child" v-for="(item, index) in materialInfo.sendPrice"
                                        :key="index">{{ item.label }} : {{ item.value }} {{ item.des ? `(${item.des})` : ''
                                        }}</label>
                                </div>
                            </div>
                            <div class="info_item" style="margin-bottom: 10px;"><label class="line">产品卖点</label></div>
                            <div>
                                <div style="margin: 0;" class="info_item" v-for="(item, index) in materialInfo.des"
                                    :key="index">{{ item.text }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <img :src="imgs[2]">
            </div>

        </div>

        <el-button style="position: fixed;right: 50px; top: 120px;" @click="toPPT">下载</el-button>
        <!-- <imgDialog  ref="imgDialog"></imgDialog> -->
    </div>
</template>

<script>
import v1 from '@/assets/images/v1.png'
import v2 from '@/assets/images/v2.png'
import v3 from '@/assets/images/v3.png'
import mm from '@/assets/images/mm.png'
import m1 from '@/assets/images/m1.png'
// import html2canvas from '@/utils/html2canvas@1.4.1.min.js'
// import imgDialog from './modules/imgDialog'
import { randomUUID } from '@/utils/util'
import PptxGenJS from 'pptxgenjs'
export default {
    name: 'ppt',
    components: {
        // imgDialog,
    },
    data() {
        return {
            tabs: ['主题', '自定义'],
            childTabs: [
                { label: '左对齐', left: '10%' },
                { label: '居中', left: 'calc(50% - 50px)' },
                { label: '右对齐', left: 'calc(90% - 100px)' }
            ],
            models: [{}, {}, {}, {}, {}],
            img_loading: false,
            imgData: {
                bannerImg: null
            },
            imgs: [v1, v2, v3],
            screenHeight: 0,
            currentIndex: 0,
            currentChildIndex: 0,
            canvasImg: null,
            materialInfo: {
                id: 57855,
                series: '国潮城市系列商务笔记本签字笔保温杯国潮城市系列',
                sendAddress: '广东省广州市天河区',
                orderNum: 100,
                box: 100,
                // 规格
                spec: [
                    { label: '规格', value: '单个保温杯套装' },
                    { label: '保温杯材质', value: '316不锈钢' },
                    { label: '内含', value: '笔记本签字笔316不锈钢保温杯' },
                ],
                // 价格
                price: [
                    { label: '销售价', value: '￥100.00' },
                    { label: '成本价', value: '￥200.00', des: '含税-不含运' },
                    { label: '市场价', value: '￥50.00' },
                ],
                sendPrice: [
                    { label: '销售价', value: '￥100.00' },
                    { label: '成本价', value: '￥200.00', des: '含税-含运' },
                ],
                // 产品详情
                des: [
                    { text: '1、国湖城市系列商务笔记本签字笔保温杯国湖城市系列商务笔记本签字笔保温杯国湖城市系列商务笔记市签字笔保温杯' },
                    { text: '2、国湖城市系列商务笔记本签字笔保温杯国湖城市系列商务笔记本签字笔保温杯国湖城市系列商务笔记市签字笔保温杯' },
                ]
            }
        }
    },
    mounted() {
        // 获取屏幕高度
        this.$nextTick(() => {
            // this.screenHeight = window.innerHeight - 140;
        })
    },
    methods: {
        fetchModels() {
            // Code to fetch the models data
        },
        uploadRequest() {
            // Code for the upload request
        },
        itemClick(item, index) {
            this.currentIndex = index
            console.log('999 :>> ', 999);
        },
        childClick(item, index) {
            this.currentChildIndex = index
        },
        toPng() {
            const canvasDom = this.$refs.canvasDom
            // html2canvas(canvasDom, {
            //         dpi: 300, // 解决生产图片模糊
            //         useCORS: true,
            //         allowTaint: false,
            //         logging: false,
            //         scale: 2,
            //         })
            //         .then((canvas) => {
            //             this.canvasImg = canvas.toDataURL('image/png')
            //             let a = document.createElement('a')
            //             a.download = randomUUID() + '.png'
            //             a.href = this.canvasImg                        
            //             a.click()
            //         })
            //         .catch(() => {

            //         })
        },
        toPPT() {
            let pptx = new PptxGenJS();
            // 第一页头图
            let slideTopImg = pptx.addSlide();
            slideTopImg.addImage({
                path: v1, x: 0,
                y: 0,
                w: "100%",
                h: "100%",
            });
            // 第二页商品详情
            let slideDetail = pptx.addSlide();
            let x = 0,y = 0.1
            slideDetail.addImage({ path: mm, x: 0, y: 0, w: 4, h: 4, });
            slideDetail.addImage({ path: m1, y: y+4.01, x: x, w: 1.33, h: 1.33, });
            slideDetail.addImage({ path: m1, y: y+4.01, x: x+1.33, w: 1.33, h: 1.33, });
            slideDetail.addImage({ path: m1, y: y+4.01, x: x+2.66, w: 1.33, h: 1.33, });
            slideDetail.addText('商品ID：57855', { x: x+4.1, y: y, h: 0.2, fontSize: 12, color: '333333' });
            slideDetail.addText('国潮城市系列商务笔记本签字笔保温杯国潮城市系列', { x: x+4.1, y: y+0.25, h: 0.2, fontSize: 12, color: '333333' });
            slideDetail.addText('', {
                shape: pptx.shapes.LINE,
                align: "center",
                x:x+ 4.2,
                y: y+0.5,
                w: 5,
                h: 0,
                line: { color: 'cccccc', width: 1 },
            });
            slideDetail.addText('| 发货地：', { x: x+4.1, y: y+0.6, w: 1, h: 0.2, fontSize: 12, color: 'FB6D09' });
            slideDetail.addText('广东省广州市天河区', { x: x+4.9, y: y+0.6, w: 5, h: 0.2, fontSize: 12, color: '333333' });
            slideDetail.addText('| 起订量：', { x: x+4.1, y: y+0.9, w: 1, h: 0.2, fontSize: 12, color: 'FB6D09' });
            slideDetail.addText('100', { x: x+4.9, y: y+0.9, w: 5, h: 0.2, fontSize: 12, color: '333333' });
            slideDetail.addText('| 规格参数', { x: x+4.1, y: y+1.2, w: 1, h: 0.2, fontSize: 12, color: 'FB6D09' });
            slideDetail.addText('规格:单个保温杯套装', { x: x+4.1, y: y+1.5, h: 0.2, fontSize: 12, color: '333333' });
            slideDetail.addText('保温杯材质:316不锈钢', { x: x+4.1, y: y+1.8, h: 0.2, fontSize: 12, color: '333333' });
            slideDetail.addText('内含:笔记本签字笔316不锈钢保温杯', { x: x+4.1, y: y+2.1, h: 0.2, fontSize: 12, color: '333333' });
            slideDetail.addText('| 价格', { x: x+4.1, y: y+2.4, w: 1, h: 0.2, fontSize: 12, color: 'FB6D09' });
            slideDetail.addText('单个保温杯套装】装箱：100起订：100', { x: x+4.1, y: y+2.7, h: 0.2, fontSize: 12, color: '333333' });
            slideDetail.addText('【采集】销售价 : ￥100.00 成本价 : ￥200.00 (含税-不含运)市场价 : ￥50.00', { x: x+4.1, y: y+3, h: 0.2, fontSize: 12, color: '333333' });
            slideDetail.addText('【代发】销售价 : ￥100.00 成本价 : ￥200.00 (含税-含运)', { x: x+4.1, y: y+3.3, h: 0.2, fontSize: 12, color: '333333' });
            
            slideDetail.addText('| 产品卖点', { x: x+4.1, y: y+3.6, w: 1, h: 0.2, fontSize: 12, color: 'FB6D09' });
            slideDetail.addText('1、国湖城市系列商务笔记本签字笔保温杯国湖城市系列商务笔记本签字笔保温杯国湖城市系列商务笔记市签字笔保温杯国湖城市系列商务笔记本签字笔保温杯国湖城市系列商务笔记本签字笔保温杯国湖城市系列商务笔记市签字笔保温杯国湖城市系列商务笔记本签字笔保温杯国湖城市系列商务笔记本签字笔保温杯国湖城市系列商务笔记市签字笔保温杯', { x: x+4.1, y: y+3.9, h: 1,w:5, fontSize: 12, color: '333333' });
            
            // 第一页头图
            let slideBottomImg = pptx.addSlide();
            slideBottomImg.addImage({
                path: v3, x: 0,
                y: 0,
                w: "100%",
                h: "100%",
            });
            pptx.writeFile('Sample Presentation.pptx');

        }
    },
}
</script>

<style lang="scss" scoped>
.container {
    padding: 30px;
}

.main {
    border: 1px solid #e8e8e8;
    padding: 20px;
}

.left {
    width: 390px;
    margin-right: 20px;
}

.ppt {
    display: flex;
    justify-content: flex-start;
}

.right {
    overflow-y: auto;

    img {
        width: 100%;
        vertical-align: top;
    }
}

.tabs {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 auto;
    width: 203px;
    margin-bottom: 20px;

    .tab {
        width: 100px;
        font-size: 14px;
        text-align: center;
        cursor: pointer;

        &:hover {
            background-color: #FF4D3C;
            color: #fff;
        }

        border: 1px solid #e8e8e8;
    }

    :not(:last-child) {
        border-right: none;
    }

    :first-child {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    :last-child {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    .active {
        background-color: #FF4D3C;
        color: #fff;
    }
}

.logo {
    display: flex;
    align-items: center;
    width: 292px;
    margin: 0 auto;
    margin-bottom: 20px;

    .logo_right {
        margin-left: 10px;

        .logo_set {
            font-size: 16px;
            color: #333;
            margin-bottom: 10px;
        }

        .logo_des {
            font-size: 12px;
            color: #999;
            margin-bottom: 10px;
        }

        .child_tabs {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin: 0 auto;
            margin-bottom: 10px;

            .tab {
                padding: 4px 10px;
                width: 60px;
                font-size: 12px;
                text-align: center;
                cursor: pointer;

                &:hover {
                    background-color: #FF4D3C;
                    color: #fff;
                }

                border: 1px solid #e8e8e8;
            }

            :not(:last-child) {
                border-right: none;
            }

            :first-child {
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;
            }

            :last-child {
                border-top-right-radius: 4px;
                border-bottom-right-radius: 4px;
            }

            .active {
                background-color: #FF4D3C;
                color: #fff;
            }

        }
    }
}

.model {
    width: 292px;
    margin: 0 auto;

    .model_title {
        font-size: 16px;
        color: #333;
        margin-bottom: 10px;
    }

    .model_content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 40px;

        .model_item {
            width: 100px;
            height: 100px;
            margin-right: 10px;
            border: 1px solid #e8e8e8;
            position: relative;
            cursor: pointer;
            overflow: hidden;

            img {
                width: 100px;
                height: 100px;
                object-fit: cover;
            }

            img:hover {
                width: 120px;
                height: 120px;
            }

            .item_title {
                font-size: 12px;
                color: #fff;
                text-align: center;
                position: absolute;
                bottom: 0;
                width: 100px;
                height: 20px;
                background-color: rgba(0, 0, 0, 0.5);
            }
        }
    }

}

.right {
    width: calc(100% - 450px);
}

.avatar-uploader,
.el-upload {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100px !important;
    height: 100px;
}

.avatar-uploader:hover,
.el-upload:hover {
    border-color: #409EFF;
}

.upload-text {
    font-size: 14px;
    color: #8c939d;
    line-height: 100px;
    text-align: center;
    margin: 0 auto;
}

.avatar {
    width: 100px;
    height: 100px;
    display: block;
}

.right {
    position: relative;

    .logo_img {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 290px;
        left: 10%;
    }

    .info {
        display: flex;
        align-items: top;
        margin: 20px 0;

        .info_left {
            .img_big {
                width: 320px;
                height: 320px;
            }

            .imgs {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 10px;

                img {
                    width: 100px;
                    height: 100px;
                }
            }
        }

        .info_right {
            // width: 400px;
            margin-left: 20px;
            padding-right: 30px;

            .info_top {
                font-size: 12px;
                color: #333;
                margin-bottom: 10px;
            }

            .address {
                padding-bottom: 10px;
                border-bottom: 1px solid #ccc;
                // width: 90%;
            }

            .info_item {
                margin-top: 8px;
                font-size: 12px;
                color: #333;

                label {
                    margin-right: 10px;
                }

                .child {
                    color: #333;
                    font-weight: 500;
                }
            }

            .line {
                margin-top: 10px;
                font-size: 14px;
                color: #FB6D09;

                label {
                    margin-right: 10px;
                }
            }

            .line::before {
                content: '';
                display: inline-block;
                width: 3px;
                height: 12px;
                background-color: #FB6D09;
                // border-radius: 50%;
                margin-right: 4px;
                margin-bottom: -1px;
            }
        }
    }
}</style>